;(function($){
    render();
    loading();
    function ajax(fn){
        $.ajax({
            url:"data/data.json",
            type:"get",
            dataType:"json",
            success:function(e){
               // console.log(e);
                var data=e.conts;
               console.log(data.length);
                var str="";
                var nav_title_str=""
                for(var i=0;i<data[0].keyword.length;i++){
                        nav_title_str+="<span>"+data[0].keyword[i]+"</span>"
                    }
                for(var j=0;j<data.length;j++){ 
                    str+=`<div class="detail_container_list">
                                <div class="detail_newT">
                                    <img src="${data[j].pic[0]}" alt="">
                                </div>
                                <div class="detail_back">
                                    <div class="detail_back_top">
                                        <div class="detail_backT_left">
                                            <span>${data[j].type}</span>
                                            <h4>${data[j].title}</h4>
                                        </div>
                                        <div class="detail_backT_right">
                                            <span>${data[j].newspaper}|</span>
                                            <span>${data[j].time}前</span>
                                        </div>
                                        <div class="comment">
                                            <span>${data[j].nums}</span>
                                            <img src="${data[j].pic[1]}">
                                        </div>
                                    </div>
                                    <div class="detail_back_nav">
                                        <div class="detail_back_tap">
                                           ${nav_title_str}
                                        </div>
                                        <div class="support">
                                            <img src="${data[j].pic[2]}">
                                        </div>
                                    </div>
                                    <div class="detail_back_info">
                                        <div class="detail_back_se">
                                            <p>${data[j].cont}</p>
                                        </div>
                                        <div class="share">
                                            <img src="${data[j].pic[3]}">
                                        </div>
                                    </div>
                                </div>
                            </div>`  
                            $("#detail_container").append(str);
                }
            }
        })
    }
    function render(){
        
        for(var i=0;i<1;i++){
            ajax();
        }
    }
 
    
    function loading(){
        window.onscroll=function(){
            var connetHeight=$(document).height();
            var windowHeight=$(window).height();
            var scrollHeight=$(window).scrollTop();
           
            if(connetHeight-windowHeight-scrollHeight==0){ 
                    createbox();
                    
            }
        }
    }
     var flag=true;
    function createbox(){
        if(flag){
            var box=$("<div class='loading'><div class='load'></div>正在加载中...</div>");
            $("#detail_container").append(box);
            flag=false;
            setTimeout(function(){
                ajax();
                $(".loading").remove();
                flag=true;
            },2000)
        }
        
        
    }
})(jQuery)
